const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成html文件
const loaders = require('./loader')
const devMode = process.env.NODE_ENV !== 'production' // 是否为开发环境
console.log('是否开发环境：', devMode)

// 公共配置文件
const webpackBaseConfig = {
  entry: path.join(__dirname, '../src/index.tsx'), // 入口文件
  // 多入口 - index 为入口名（如果 output 没有起名）
  // entry: {
  //   index: path.resolve(__dirname, '../src/index.tsx'),
  //   main: path.resolve(__dirname, '../src/main.tsx')
  // },
  // 输出配置
  output: {
    path: devMode ? undefined : path.join(__dirname, '../dist'), // 输出文件存放目录
    /**
     * fullhash 不利于浏览器缓存，因为一个文件的改动会导致所有文件的 hash 改变
     * contenthash 利于浏览器缓存，因为只有改动的文件才会生成新的 hash
     */
    filename: devMode ? 'static/js/[name].js' : 'static/js/[name].[contenthash:10].js', // 输出文件名
    // chunkFilename: 'static/js/[name].chunk.js',
    // assetModuleFilename: 'static/media/[hash:10][ext][query]',
    clean: true,
    publicPath: '/' // 打包后文件的公共前缀路径
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: 'body', // 将js文件注入到body中
      title: 'alpha template', // html文件标题
      template: path.join(__dirname, '../public/index.html') // 模板文件
      // chunks: ['index']
    })
    // 多入口
    // new HtmlWebpackPlugin({
    //   template: path.resolve(__dirname, '../src/public/main.html'),
    //   chunks: ['main'], //  考虑入口以及代码分割
    //   filename: 'other.html'
    // }),
  ],
  // 模块配置
  resolve: {
    extensions: ['.js', '.jsx', '.tsx', '.ts', 'json'], // 自动解析确定的扩展，使导入模块时不带扩展名
    alias: {
      '@': path.join(__dirname, '../src/')
    }
  },
  // 模块规则
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true, // 开启缓存
              cacheCompression: false // 关闭缓存压缩
              // 以下在 babel.config.js 配置
              // presets: ['@babel/preset-env', '@babel/preset-react'],
              // plugins: ['react-refresh/babel'].filter(Boolean)
            }
          }
        ],
        // prod 环境
        // use: ['happypack/loader?id=babel'], // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
        // use: ['thread-loader', 'babel-loader?cacheDirectory'], // 开启缓存
        exclude: /node_modules/
      },
      {
        test: /\.ts[x]?$/,
        use: {
          loader: 'ts-loader', // 解析 ts
          options: {
            transpileOnly: true // 只转译不检查
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/, // css
        use: loaders()
      },
      {
        test: /\.s[ac]ss$/, // sass
        use: loaders('sass-loader')
      }
    ]
  }
}
module.exports = webpackBaseConfig
